<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="params">
      <el-form-item label="订单号">
        <el-input v-model="params.code" placeholder="请输入订单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="交易单号">
        <el-input v-model="params.trade_no" placeholder="请输入交易单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户手机号">
        <el-input v-model="params.mobile" placeholder="请输入用户手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select v-model="params.pay_mode" clearable placeholder="请选择支付方式">
          <el-option v-for="item in payModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态">
        <el-select v-model="params.payment_status" clearable placeholder="请选择支付状态">
          <el-option v-for="item in payStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交易状态">
        <el-select v-model="params.transaction_status" clearable placeholder="请选择交易状态">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
        <el-button type="primary" @click="exportAll()">导出数据</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="code" align="center" label="订单号" width="190">
      </el-table-column>
      <el-table-column prop="trade_no" align="center" label="交易单号" width="190">
      </el-table-column>
      <el-table-column prop="nickname" align="center" label="用户昵称">
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="用户手机号">
      </el-table-column>
      <el-table-column prop="refill_card_name" align="center" label="充值卡名">
      </el-table-column>
      <el-table-column prop="fact_cost" align="center" label="实际支付">
      </el-table-column>
      <el-table-column prop="refill_card_append" align="center" label="赠送金额">
      </el-table-column>
      <el-table-column prop="refill_money" align="center" label="实际金额">
      </el-table-column>
      <el-table-column align="center" label="支付方式">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.pay_mode==1">微信</el-tag>
          <el-tag v-if="scope.row.pay_mode==2">支付宝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" align="center" label="支付状态">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.payment_status==0">待支付</el-tag>
          <el-tag type="warning" v-else-if="scope.row.payment_status==1">支付已提交</el-tag>
          <el-tag type="danger" v-else-if="scope.row.payment_status==6">支付失败</el-tag>
          <el-tag type="success" v-else-if="scope.row.payment_status==7">支付成功</el-tag>
          <el-tag type="warning" v-else>其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" align="center" :formatter="statusFormatter" label="订单状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.transaction_status==0">已下单</el-tag>
          <el-tag type="info" v-if="scope.row.transaction_status==1">交易结束</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="format_create_time_millis" align="center" label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 20, 30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 查看 -->
    <el-dialog :title="'订单[ '+info.code+' ]的详情'" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" disabled :model="info" label-width="120px">
        <el-form-item label="订单号">
          <el-input v-model="info.code"></el-input>
        </el-form-item>
        <el-form-item label="交易单号" v-if="info.trade_no">
          <el-input v-model="info.trade_no"></el-input>
        </el-form-item>
        <el-form-item label="充值卡名">
          <el-input v-model="info.refill_card_name"></el-input>
        </el-form-item>
        <el-form-item label="充值金额">
          <el-input v-model="info.refill_card_money"></el-input>
        </el-form-item>
        <el-form-item label="充值赠送">
          <el-input v-model="info.refill_card_append"></el-input>
        </el-form-item>
        <el-form-item label="实际支付">
          <el-input v-model="info.fact_cost"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-tag v-if="info.pay_mode==1">微信</el-tag>
          <el-tag v-if="info.pay_mode==2">支付宝</el-tag>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-tag type="info" v-if="info.payment_status==0">未支付</el-tag>
          <el-tag type="warning" v-else-if="info.payment_status==1">支付已提交</el-tag>
          <el-tag type="danger" v-else-if="info.payment_status==6">支付失败</el-tag>
          <el-tag type="success" v-else-if="info.payment_status==7">支付成功</el-tag>
          <el-tag type="warning" v-else-if="info.payment_status==2">支付成功，但业务发生异常需要发起退款</el-tag>
          <el-tag type="warning" v-else-if="info.payment_status==3">支付成功，但业务发生异常自动退款成功</el-tag>
          <el-tag type="warning" v-else-if="info.payment_status==4">支付成功，但业务发生异常自动退款失败</el-tag>
          <el-tag type="warning" v-else-if="info.payment_status==5">支付成功，但业务发生异常需要发起退款</el-tag>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-tag type="warning" v-if="info.transaction_status==0">已下单</el-tag>
          <el-tag type="info" v-if="info.transaction_status==1">交易结束</el-tag>
        </el-form-item>
        <el-form-item label="关闭状态">
          <el-tag type="warning" v-if="info.close_status==0">未关闭</el-tag>
          <el-tag v-if="info.close_status==1">手动关闭</el-tag>
          <el-tag v-if="info.close_status==2">过期支付关闭</el-tag>
        </el-form-item>
        <el-form-item label="订单创建时间">
          <el-input v-model="info.format_create_time_millis"></el-input>
        </el-form-item>
        <el-form-item label="订单过期时间">
          <el-input v-model="info.format_expiration_time"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import Vue from 'vue'
import orderService from '@/api/orderService.js'
export default {
  data () {
    return {
      params: {
        page: 1,
        limit: 10,
        code: '',
        trade_no: '',
        mobile: '',
        payment_status: '',
        close_status: '',
        transaction_status: '',
        pay_mode: ''
      },
      dataList: [],
      total: null,
      tableLoading: false,
      addOrUpdateVisible: false,
      payStatusList: [{
        label: '待支付',
        value: 0
      }, {
        label: '支付成功',
        value: 7
      }],

      payModeList: [{
        label: '微信',
        value: 1
      }, {
        label: '支付宝',
        value: 2
      }],

      statusList: [{
        label: '已下单(待支付)',
        value: 0
      }, {
        label: '交易结束',
        value: 1
      }],
      dialogVisible: false,
      info: {}
    }
  },
  components: {
    // ViewOrUpdate
  },
  mounted () {
    this.loadList()
  },
  methods: {
    // 导出数据
    exportAll () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          window.location.href = `${this.$config.SERVER_URL}/admin/order/refillcard/export?code=${this.params.code}&trade_no=${this.params.trade_no}&mobile=${this.params.mobile}&payment_status=${this.params.payment_status}&transaction_status=${this.params.transaction_status}&pay_mode=${this.params.pay_mode}&token=${token}`
        })
        .catch(() => { })
    },
    loadList () {
      this.tableLoading = true
      orderService.platformTopupOrder(this.params).then(res => {
        if (res.data && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
        this.tableLoading = false
      }).then(res => {
        this.tableLoading = false
      })
    },

    handleSizeChange (e) {
      this.params.limit = e
      this.params.page = 1
      this.loadList()
    },
    handleCurrentChange (e) {
      this.params.page = e
      this.loadList()
    },
    search (e) {
      this.params.page = 1
      this.loadList()
    },

    /* 查看 */
    view (v) {
      this.dialogVisible = true
      orderService.topupOrderDetail(v.id).then(res => {
        if (res.data && res.data.code == 200) {
          this.info = res.data.data
        }
      })
    },
    //
    paytype (row, column) {
      let status = row.paytype
      if (status === 0) {
        return '微信支付'
      } else {
        return '银行卡'
      }
    },
    //
    statusFormatter (row, column) {
      let status = row.orderStatus
      if (status === 0) {
        return '充值成功'
      } else {
        return '充值失败'
      }
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.viewOrUpdate.init(id)
      })
    }
  }
}
</script>
